Skip to content

[FE] [FEAT] Report Myself 컴포넌트 구현#401

Merged
1jiwoo27 merged 53 commits intodevelopfrom
feat/#264/report-myself
Feb 15, 2026
Merged

[FE] [FEAT] Report Myself 컴포넌트 구현#401
1jiwoo27 merged 53 commits intodevelopfrom
feat/#264/report-myself

Conversation

@1jiwoo27
Copy link
Collaborator

관련 이슈

closes #264

작업 내용

  • ReportLegend report-page 내 공통 컴포넌트로 분리
  • VerticalGrid report-page 내 공통 컴포넌트로 분리
  • ReportMyself 컴포넌트 구현

컴포넌트 구조

ReportMyself → ReportLegend, VerticalGrid, ReportLineGraph → ReportLineChart

스크린샷

Feb-12-2026 18-14-15

  • thisMonth의 마지막 날이 label에 표시됩니다
  • 왼쪽 위 컴포넌트는 아직 currency 연결을 안 하고 us로 고정해두어 달러로 표시되고 있습니다!
    • ReportMonthly 컴포넌트는 지금 안 보셔도 됩니다 (다음 pr에서 작업 예정)

✨ 리뷰 포인트

  • 분석 페이지 내 다른 그래프와 애니메이션 속도가 비슷한지 확인해주세요
    • 원래 animation 시간 관련된 상수를 불러와서 넣었었는데, 옆 그래프보다 훨씬 빠르게 애니메이션이 끝나서 비슷하게 맞춰보았습니다

💬 공유사항 to 리뷰어

  • 원래는 위에 텍스트가 '지난달 이맘때보다 15만원 더 쓰는 중이에요' 인데 금액과 단위에 따라 한 줄을 넘어가는 문제로, '지난달보다 15만원 더 쓰는 중이에요'로 바꿔서 넣어봤어요
    • 금액 전에 한 줄을 띄어서 구현하려하였으나 한 줄에 넣는 게 디자인 상 더 괜찮아 보여서 임의로 해두었습니다
  • ReportContent에서 제목 부분 빼는 거는 다음 pr에서 작업할게요
  • 그래프 끝 점에 동그랗게 반짝이는 애니메이션도 이후에 추가하겠습니다,,,
    • svg로 그래프를 그려봤는데 구조가 복잡해서 쉽지 않네요 🥲

1jiwoo27 and others added 30 commits February 11, 2026 18:22
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @1jiwoo27, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 리포트 페이지에 '내 지출 리포트' 기능을 추가하고, 페이지 내에서 재사용 가능한 공통 UI 컴포넌트들을 분리하여 코드의 재사용성과 유지보수성을 향상시키는 데 중점을 둡니다. 특히, 월별 지출 비교를 위한 라인 그래프와 범례, 그리고 수직 그리드 컴포넌트가 새롭게 구현되거나 기존 컴포넌트에서 분리되어, 다양한 리포트 섹션에서 일관된 디자인과 기능을 제공할 수 있도록 기반을 마련했습니다.

Highlights

  • 공통 컴포넌트 분리: 리포트 페이지 내에서 재사용될 ReportLegendVerticalGrid 컴포넌트가 공통 컴포넌트로 분리 및 리팩토링되었습니다.
  • ReportMyself 컴포넌트 구현: 전월 대비 지출을 비교하는 ReportMyself 컴포넌트가 새롭게 구현되었으며, 이는 ReportLineGraphReportLineChart를 포함합니다.
  • 기존 컴포넌트 업데이트: ReportBarGraphReportBarList 컴포넌트가 새로 분리된 ReportLegendVerticalGrid를 사용하도록 업데이트되어 일관성을 확보했습니다.
  • 라인 차트 애니메이션 추가: SVG 라인 차트의 동적인 그리기를 위한 draw-path CSS 키프레임 애니메이션이 추가되었습니다.
Changelog
  • frontend/src/components/report-page/ReportLegend.tsx
    • 리포트 페이지에서 사용할 범례 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/VerticalGrid.tsx
    • 리포트 페이지에서 사용할 수직 그리드 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/category/ReportBar.tsx
    • 코드 포맷팅이 수정되었습니다.
  • frontend/src/components/report-page/category/ReportBarGraph.tsx
    • 기존의 인라인 범례 정의가 제거되고, 새로 분리된 ReportLegend 컴포넌트를 사용하도록 업데이트되었습니다.
  • frontend/src/components/report-page/category/ReportBarList.tsx
    • VerticalGrid 컴포넌트의 임포트 경로가 변경되고, maxLabel 대신 labels prop을 사용하도록 업데이트되었습니다.
  • frontend/src/components/report-page/category/ReportCategory.tsx
    • ReportContent의 패딩과 텍스트 색상이 조정되었습니다.
  • frontend/src/components/report-page/category/VerticalGrid.tsx
    • 공통 VerticalGrid 컴포넌트 분리에 따라 기존 파일이 제거되었습니다.
  • frontend/src/components/report-page/layout/ReportContent.tsx
    • justify-between 스타일이 제거되어 유연한 레이아웃을 제공하도록 변경되었습니다.
  • frontend/src/components/report-page/mock.ts
    • MyselfItem 인터페이스가 추가되었고, compareWithLastMonth 목업 데이터 구조 및 타입 정의가 업데이트되었습니다.
  • frontend/src/components/report-page/monthly/ReportMonthly.tsx
    • 월별 지출 요약을 표시하는 ReportMonthly 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/ReportLineChart.tsx
    • 누적 지출을 라인 그래프로 시각화하는 ReportLineChart 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/ReportLineGraph.tsx
    • ReportLineChartReportLegend를 통합하여 라인 그래프를 표시하는 ReportLineGraph 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/ReportMyself.tsx
    • 전월 대비 지출 비교를 위한 ReportMyself 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/buildPath.ts
    • SVG 라인 및 영역 경로를 생성하는 유틸리티 함수들이 추가되었습니다.
  • frontend/src/pages/ReportPage.tsx
    • ReportMonthlyReportMyself 컴포넌트가 리포트 페이지에 통합되었습니다.
  • frontend/src/styles/animation.css
    • SVG 라인 그래프 애니메이션을 위한 draw-path 키프레임이 추가되었습니다.
Activity
  • ReportLegendVerticalGrid 컴포넌트가 report-page 내 공통 컴포넌트로 분리되었습니다.
  • ReportMyself 컴포넌트가 구현되었으며, ReportLegend, VerticalGrid, ReportLineGraph, ReportLineChart를 포함하는 구조를 가집니다.
  • 스크린샷을 통해 ReportMyself 컴포넌트의 UI가 공유되었습니다.
  • thisMonth의 마지막 날이 라벨에 표시되는 점과, 왼쪽 위 컴포넌트의 통화가 아직 US 달러로 고정되어 있다는 점이 언급되었습니다.
  • ReportMonthly 컴포넌트는 다음 PR에서 작업 예정이므로 현재는 검토 대상이 아님을 명시했습니다.
  • 리뷰 포인트로 분석 페이지 내 다른 그래프와 애니메이션 속도가 비슷한지 확인해달라는 요청이 있었습니다.
  • "지난달 이맘때보다 15만원 더 쓰는 중이에요" 텍스트의 줄바꿈 문제로 인해 "지난달보다 15만원 더 쓰는 중이에요"로 변경되었으며, 디자인상 한 줄에 표시하는 것이 더 낫다고 판단했습니다.
  • ReportContent에서 제목 부분을 제거하는 작업은 다음 PR에서 진행될 예정입니다.
  • 그래프 끝 점의 반짝이는 애니메이션도 이후에 추가될 예정이며, SVG 구조의 복잡성으로 인해 어려움이 있음을 공유했습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

이번 PR은 'Report Myself' 컴포넌트를 구현하고, ReportLegendVerticalGrid를 공통 컴포넌트로 분리하는 작업을 포함하고 있습니다. 공통 컴포넌트로의 리팩토링은 코드 재사용성 측면에서 훌륭한 개선입니다. 새롭게 추가된 라인 그래프 관련 컴포넌트들도 구조가 잘 잡혀있습니다. 새로운 컴포넌트의 견고성과 유지보수성을 향상시키기 위한 몇 가지 제안을 남깁니다. 전반적으로 훌륭한 기여입니다.

Copy link
Collaborator

@Kjiw0n Kjiw0n left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다! 👍 👍

코멘트 확인 부탁드려요.
분석파트 API명세 아직 안나온 것 같은데, mock과 유사한 방향으로 부탁드려도 될 것 같아요!

Copy link
Collaborator

@minngyuseong minngyuseong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨어요

@1jiwoo27 1jiwoo27 merged commit ecd35af into develop Feb 15, 2026
1 check passed
@1jiwoo27 1jiwoo27 deleted the feat/#264/report-myself branch February 15, 2026 15:14
minngyuseong pushed a commit that referenced this pull request Feb 17, 2026
* feat: myself 컴포넌트 초기 구현

* chore: import 문  절대 경로로 변경

* feat: report page 구조 초기 구현

* feat: 분석 페이지 레이아웃 스타일 반영

* refactor: ReportLegend 컴포넌트 분리

* feat: 사용량 안내 subtext 추가

* feat: ReportLegend line variant 추가

* chore: legend border-radius 10px로 변경

* feat: line chart svg로 초기 구현

* chore: 그래프에 필요한 data props로 전달

* refactor: VerticalGrid 다른 그래프에서도 사용할 수 있도록 리팩터링

* chore: import문 절대경로로 변경

* feat: accountbook 데이터 없을 시, mockdata 불러오기

* chore: store 불러오는 불필요한 코드 삭제

* feat: buildPath 함수 차트 파일에 추가

* chore: prettier 스크립트 실행

* feat: verticalGrid 추가

* chore: verticalGrid 컴포넌트에 className props 추가

* chore: 그래프와 그리드에 relative 속성 추가

* feat: 그래프와 그리드 크기 조정

* refactor: VerticalGrid에 positions props 추가하여 일정하지 않은 라벨에서도 사용 가능하도록 변경

* chore: label 깨지지 않도록 whitespace-nowrap 속성 추가

* refactor: props 정리 및 불필요한 계산 로직 삭제

* feat: mockdata 구조 변경 및 데이터 적용

* feat: 애니메이션 스타일 css 파일로 분리

* feat: prevPath fill 속성 추가 (커스텀 스타일 적용)

* chore: 그래프 height 변경

* feat: 필요한 count props 추가

* chore: animation 변수명 변경

* chore: 라벨 mockData 정보로 변경

* refactor: buildPath 파일 분리

* chore: prev 대신 last로 통일

* chore: props 관련 주석 추가

* chore: Legend_Color key 값 변경

* chore: 필요없는 변수 삭제

* refactor: buildPath 함수 내 반복되는 로직 분리

* chore: 컴포넌트명 변경

* chore: 바뀐 컴포넌트명에 따라 import 문 수정

* style: pl 추가로 가운데 정렬

* chore: 필요한 currencyCode만 불러오도록 조건문 작성

* refactor: 반복되는 ChartItem 타입 분리 및 props에 적용

* fix: 자동 저장 시 줄바꿈되면서 변경사항으로 인식되는 문제로, .gitattributes에 routeTree 파일 추가

* refactor: 라벨도 gridPositions 기준으로 순회하도록 변경 (라벨이 없으면 렌더링하지 않게 처리)

* chore: 함수 호출 부분 상수화

* chore: props 타입 keyof typeof로 통일

* feat: mockdata 구조 변경

* refactor: month 단위로 props 구조 재정리

* chore: 불필요한 주석 삭제

* chore: className props에서 제거

* chore: 타입 단언 제거 및 countryCode null 가드 추가
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Report_monthly_myself (전월 대비 지출 비교) 컴포넌트 제작

3 participants